<template>
  <a-dropdown trigger="hover" @select="handleSelect">
    <div class="z-dropdown">
      <a-avatar :image-url="ZLogo"></a-avatar>
      <span class="username">{{ userInfo.userName }}</span
      ><icon-down />
    </div>
    <template #content>
      <a-doption :value="item.name" v-for="item in dropdownList">
        {{ item.title }}
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import ZLogo from "@/assets/images/logo/zlogo.png";

import { userStorer } from "@/stores/user_store";
import { storeToRefs } from "pinia";
const userStore = userStorer();

const { userInfo } = storeToRefs(userStore);
interface DropdownItem {
  title: string;
  name: string;
}

const dropdownList = reactive<DropdownItem[]>([
  {
    title: "设置",
    name: "setting",
  },
  {
    title: "退出登录",
    name: "logout",
  },
]);

const handleSelect = (value: any) => {
  console.log(value);
  if (value === "logout") {
    userStore.logout();
  }
};
</script>
<style scoped lang="less">
.z-dropdown {
  cursor: pointer;
  .username {
    margin: 0 5px;
  }
}
</style>
